<template>
    <view class="receive">
        <view class="receives">
            <!-- 商品详情 -->
            <view class="receive_info" @click="good_detail">
                <image
                    class="detail_img"
                    :src="recordList.thumbnail"
                    mode=""
                ></image>
                <view>
                    <text class="detail_t">{{ recordList.goodsName }}</text>
                    <view class="detail_tt">
                        <text v-if="recordList.simpleSpecs != null">{{
                            recordList.simpleSpecs || "--"
                        }}</text>
                        <text v-if="recordList.simpleSpecs == null">--</text>
                    </view>
                    <u-icon
                        name="arrow-right"
                        color="#333"
                        size="14"
                        top="5px"
                        bold
                        labelPos="left"
                    ></u-icon>
                </view>
            </view>
            <!-- 信息详情 -->
            <view class="list flex_wrap flex_column">
                <u-gap height="32rpx"></u-gap>
                <u-row
                    v-if="
                        recordList.reportingPeriod != '' &&
                        recordList.reportingPeriod != null
                    "
                >
                    <u-col span="3"
                        ><u--text
                            text="报告周期"
                            bold
                            color="#333"
                            size="26rpx"
                            bold
                    /></u-col>
                    <u-col span="8"
                        ><u--text
                            :text="recordList.reportingPeriod + '个工作日'"
                            color="#333"
                            size="24rpx"
                    /></u-col>
                </u-row>
                <u-gap
                    height="24rpx"
                    v-if="
                        recordList.reportingPeriod != '' &&
                        recordList.reportingPeriod != null
                    "
                ></u-gap>
                <u-row
                    justify="space-between"
                    align="top"
                    v-if="
                        recordList.returnAddress != '' &&
                        recordList.returnAddress != null
                    "
                >
                    <u-col span="3"
                        ><u--text
                            bold
                            text="回寄地址"
                            color="#333"
                            size="26rpx"
                            bold
                    /></u-col>
                    <u-col span="7"
                        ><u--text
                            :text="recordList.returnAddress"
                            color="#333"
                            size="24rpx"
                    /></u-col>
                    <u-col span="2" @click="cope()">
                        <u--text
                            align="right"
                            text="复制"
                            size="26rpx"
                            bold
                            color="#588BF3"
                    /></u-col>
                </u-row>
                <u-gap
                    height="24rpx"
                    v-if="
                        recordList.returnAddress != '' &&
                        recordList.returnAddress != null
                    "
                />
                <u-row
                    v-if="
                        recordList.returnReceiver != '' &&
                        recordList.returnReceiver != null
                    "
                >
                    <u-col span="3"
                        ><u--text
                            bold
                            text="收件人"
                            color="#333"
                            size="26rpx"
                            bold
                    /></u-col>
                    <u-col span="8">
                        <text
                            style="
                                color: #333;
                                font-size: 24rpx;
                                margin-right: 8rpx;
                            "
                            >{{ recordList.returnReceiver }}</text
                        >
                        <text style="color: #333; font-size: 24rpx">{{
                            recordList.returnReceiverPhone
                        }}</text>
                    </u-col>
                </u-row>
                <u-gap
                    height="24rpx"
                    v-if="
                        recordList.returnReceiver != '' &&
                        recordList.returnReceiver != null
                    "
                />
            </view>
        </view>
        <u-gap height="7" bgColor="#F5F5F5 " marginTop="8"></u-gap>
        <!-- 领取信息 -->
        <view class="message" v-if="detailStatus == '0'">
            <view class="enterprise_top">
                <text class="enterprise_bg"></text>
                <u-text text="领取信息" size="32rpx" bold />
                <view
                    class="btn"
                    @click="to_next"
                    v-if="recordList.status == '4'"
                >
                    下一步
                </view>
            </view>
            <!-- <u-gap height="24rpx"></u-gap> -->
            <u-row justify="space-between" align="top">
                <u-col span="2"
                    ><u--text
                        bold
                        text="领取日期"
                        color="#333"
                        size="26rpx"
                        bold
                /></u-col>
                <u-col span="8">
                    <u--text
                        v-if="
                            recordList.createTime != null &&
                            recordList.createTime != ''
                        "
                        align="right"
                        :text="`${recordList.createTime.split(' ')[0]}`"
                        color="#333"
                        size="26rpx"
                    />
                    <u--text
                        v-if="
                            recordList.createTime == null ||
                            recordList.createTime == ''
                        "
                        align="right"
                        :text="recordList.createTime || '--'"
                        color="#333"
                        size="26rpx"
                    />
                </u-col>
            </u-row>
            <u-gap height="24rpx" />
            <u-row justify="space-between" align="top">
                <u-col span="2"
                    ><u--text
                        bold
                        text="礼品来源"
                        color="#333"
                        size="26rpx"
                        bold
                /></u-col>
                <u-col span="8">
                    <u-icon
                        name="arrow-right"
                        :label="recordList.salesmanName || '--'"
                        labelColor="#588BF3"
                        top="1"
                        labelSize="13"
                        color="#588BF3"
                        size="12"
                        labelPos="left"
                        bold
                        @click="to_card()"
                        v-if="recordList.giftSource == null"
                    ></u-icon>
                    <!-- <u-icon name="arrow-right" :label="recordList.giftSource || '--'" labelColor="#588BF3" top="1" labelSize="13" color="#588BF3" size="12" labelPos='left' bold v-if="recordList.giftSource != null"></u-icon> -->
                    <u--text
                        align="right"
                        :text="recordList.giftSource || '--'"
                        color="#333"
                        size="26rpx"
                        v-if="recordList.giftSource != null"
                    />
                </u-col>
            </u-row>
            <u-gap height="24rpx"></u-gap>
            <u-row justify="space-between" align="top">
                <u-col span="2"
                    ><u--text bold text="领取人" color="#333" size="26rpx" bold
                /></u-col>
                <u-col span="8"
                    ><u--text
                        align="right"
                        :text="recordList.name"
                        color="#333"
                        size="26rpx"
                /></u-col>
            </u-row>
            <u-gap height="24rpx" />
            <!-- 0:快递发货1:现场提货 -->
            <u-row
                justify="space-between"
                align="top"
                v-if="recordList.consigneeType === '0'"
            >
                <u-col span="2"
                    ><u--text
                        bold
                        text="快递地址"
                        color="#333"
                        size="26rpx"
                        bold
                /></u-col>
                <u-col span="8">
                    <u-icon
                        name="arrow-right"
                        :label="(recordList.testingRegion+recordList.testingAddress) || '待填写'"
                        labelColor="#588BF3"
                        top="1"
                        labelSize="13"
                        color="#588BF3"
                        size="12"
                        labelPos="left"
                        bold
                        @click="to_check()"
                    ></u-icon>
                </u-col>
            </u-row>
            <u-gap height="24rpx" v-if="recordList.consigneeType === '0'"/>
        </view>
		<!-- 用户中心点进来的 -->
		<view class="message" v-if="detailStatus == '1'">
		    <view class="enterprise_top">
		        <text class="enterprise_bg"></text>
		        <u-text text="领取信息" size="32rpx" bold />
		    </view>
		    <u-row justify="space-between" align="top">
		        <u-col span="2"
		            ><u--text
		                bold
		                text="领取日期"
		                color="#333"
		                size="26rpx"
		                bold
		        /></u-col>
		        <u-col span="8">
		            <u--text
		                v-if="
		                    recordList.createTime != null &&
		                    recordList.createTime != ''
		                "
		                align="right"
		                :text="`${recordList.createTime.split(' ')[0]}`"
		                color="#333"
		                size="26rpx"
		            />
		            <u--text
		                v-if="
		                    recordList.createTime == null ||
		                    recordList.createTime == ''
		                "
		                align="right"
		                :text="recordList.createTime || '--'"
		                color="#333"
		                size="26rpx"
		            />
		        </u-col>
		    </u-row>
		    <u-gap height="24rpx" />
		    <u-row justify="space-between" align="top">
		        <u-col span="2"
		            ><u--text bold text="领取人" color="#333" size="26rpx" bold
		        /></u-col>
		        <u-col span="8"
		            ><u--text
		                align="right"
		                :text="recordList.name"
		                color="#333"
		                size="26rpx"
		        /></u-col>
		    </u-row>
		    <u-gap height="24rpx" />
		    <!-- 0:快递发货1:现场提货 -->
		    <u-row
		        justify="space-between"
		        align="top"
		        v-if="recordList.consigneeType === '0'"
		    >
		        <u-col span="2"
		            ><u--text
		                bold
		                text="快递地址"
		                color="#333"
		                size="26rpx"
		                bold
		        /></u-col>
				<u-col span="8"
				    ><u--text
				        align="right"
				        :text="(recordList.testingRegion+recordList.testingAddress) || '未填写'"
				        color="#333"
				        size="26rpx"
				/></u-col>
		    </u-row>
		    <u-gap height="24rpx" v-if="recordList.consigneeType === '0'"/>
			<u-row justify="space-between" align="top">
			    <u-col span="2"
			        ><u--text bold text="绑定会议" color="#333" size="26rpx" bold
			    /></u-col>
			    <u-col span="8"
			        ><u--text
			            align="right"
			            :text="recordList.meetName || '否'"
			            color="#333"
			            size="26rpx"
			    /></u-col>
			</u-row>
		</view>
        <u-gap height="7" bgColor="#F5F5F5 " marginTop="8" v-if="detailStatus == '0'" />
        <!-- 二维码位置 -->
        <view class="message" v-if="detailStatus == '0'">
            <view class="enterprise_top">
                <text class="enterprise_bg"></text>
                <u-text text="报告解读" size="32rpx" bold />
            </view>
            <u-row align="top">
                <u-col span="3"
                    ><u--text
                        bold
                        text="客服热线"
                        color="#333"
                        size="26rpx"
                        bold
                /></u-col>
                <u-col span="4"
                    ><u--text :text="phone || '--'" color="#333" size="26rpx"
                /></u-col>
                <u-col span="4">
                    <view style="display: flex" @click="to_call">
                        <u-icon size="18" name="phone" color="#588BF3"></u-icon
                        ><u--text
                            margin="0 4rpx"
                            text="拨打"
                            size="24rpx"
                            color="#588BF3"
                            bold
                        ></u--text>
                    </view>
                </u-col>
            </u-row>
        </view>
    </view>
</template>

<script>
import { getRocordId, getphone } from "@/api/receive";
export default {
    data() {
        return {
            buttonStyle: {
                color: "#FFF",
                backgroundColor: "#588BF3",
                width: "158rpx",
                height: "44rpx",
                fontSize: "24rpx",
            },
            configKeys: "CUSTOMER_SERVICE_HOTLINE",
            recordList: {},
            phone: "",
			detailStatus:''//1：用户中心进去的  0：客户端领取记录进去的
        };
    },
    onLoad(options) {
        this.loading = true;
		this.detailStatus = options.detailStatus
        this.receiveId = options.receiveId;
		console.log(options,'op>>>>>>>>>>',this.detailStatus)
        this.getRecordDetail(this.receiveId);
        this.getPhone();
    },
    methods: {
        getPhone() {
            getphone(this.configKeys).then((res) => {
                this.phone = res.data.customerServicePhone;
            });
        },
        good_detail() {
            if (
                this.recordList.detailImage == "" ||
                this.recordList.detailImage == null
            ) {
                uni.$u.toast("暂无详情图片！");
                return;
            } else {
                uni.navigateTo({
                    url:
                        "/pages_receive/goods_detail/index?detailImage=" +
                        this.recordList.detailImage,
                });
            }
        },
        cope() {
            if (
                (this.recordList.returnReceiverPhone == "" &&
                    this.recordList.returnReceiver == "") ||
                (this.recordList.returnReceiverPhone == null &&
                    this.recordList.returnReceiver == null)
            ) {
                let data = this.recordList.returnAddress;
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else if (
                this.recordList.returnReceiver == "" ||
                this.recordList.returnReceiver == null
            ) {
                let data =
                    this.recordList.returnAddress +
                    "," +
                    this.recordList.returnReceiverPhone;
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else if (
                this.recordList.returnReceiverPhone == "" ||
                this.recordList.returnReceiverPhone == null
            ) {
                let data =
                    this.recordList.returnAddress +
                    "," +
                    this.recordList.returnReceiver; //获取到你要复制的字符串
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            } else {
                let data =
                    this.recordList.returnAddress +
                    "," +
                    this.recordList.returnReceiver +
                    "," +
                    this.recordList.returnReceiverPhone; //获取到你要复制的字符串
                uni.setClipboardData({
                    data: data,
                    success: (res) => {
                        uni.showToast({
                            title: "已复制",
                            duration: 2000,
                        });
                    },
                });
            }
            //执行复制
        },
        to_call() {
            if (this.phone == "" || this.phone == null) {
                uni.$u.toast("暂无客服热线号码，不支持拨打电话！");
                return;
            } else {
                this.contact();
            }
        },
        contact() {
            uni.makePhoneCall({
                // 手机号
                phoneNumber: this.phone,
                // 成功回调
                success: (res) => {},
                // 失败回调
                fail: (res) => {},
            });
        },
        getRecordDetail(receiveId) {
            getRocordId(receiveId).then((res) => {
                this.recordList = res.data;
                // this.createTime = res.data.createTime.split(" ")[0];
                this.salesmanId = res.data.salesmanId;
                this.id = res.data.receiveId;
                this.name = res.data.name; //领取名称
                this.mobile = res.data.mobile; //领取手机
            });
        },
        to_next() {
            //下一步按钮
            uni.$u.route({
                //商品类  去收货人
                url: "/pages_receive/receive_receipt/index",
                params: {
                    id: this.id,
                    couponNum: this.couponNum,
                    name: this.name,
                    mobile: this.mobile,
                },
            });
        },
        to_card() {
            //其他业务员页面
            let id = this.salesmanId;
            setTimeout(() => {
                uni.navigateTo({
                    url: "/pages_card/user_card/index?salesmanId=" + id,
                });
            }, 500);
        },
        to_check() {
            if (this.recordList.status == "4") {
                this.to_next();
            } else {
                uni.$u.route({
                    url: "/pages_receive/back_body/index",
                    params: {
                        id: this.id,
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss">
.receive {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    // padding-bottom: 40rpx;
    color: #333333;
}
.receives {
    padding: 36rpx 28rpx 0;
}
.close_x {
    background-color: red;
    width: 30rpx;
    height: 30rpx;
    z-index: 4;
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    opacity: 0;
}
.receive_info {
    box-shadow: 0px 0px 16rpx 2rpx rgba(0, 0, 0, 0.12);
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0;
    display: flex;
    align-items: center;
}
.detail_img {
    width: 166rpx;
    height: 166rpx;
    border-radius: 8rpx;
    margin: 0 20rpx 0 16rpx;
}
.detail_t {
    display: block;
    width: 484rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail_tt {
    margin-top: 18rpx;
    font-size: 26rpx;
    color: #666666;
    text {
        margin-right: 10rpx;
    }
}
.message {
    padding: 32upx 28upx 0;
}
.enterprise_top {
    display: flex;
    height: 44rpx;
    align-items: center;
    margin-bottom: 32rpx;
}
.enterprise_bg {
    display: block;
    width: 8rpx;
    height: 28rpx;
    background: #588bf3;
    margin-right: 16rpx;
}
.enterprise_t {
    font-size: 26rpx;
    margin-top: 32rpx;
}
.btn {
    width: 172rpx;
    height: 52rpx;
    border-radius: 22rpx;
    background-color: #588bf3;
    color: #fff;
    font-size: 24rpx;
    line-height: 52rpx;
    text-align: center;
}
</style>
